<template>
  <div class="home-container">
    <!-- 顶部英雄区 -->
    <section class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">微前端企业级应用平台</h1>
        <p class="hero-subtitle">Monorepo + Qiankun + Pinia + 权限控制 + 自动化部署</p>
        <div class="hero-actions">
          <el-button type="primary" @click="scrollToFeatures">
            探索功能
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <el-button @click="navigateToGitRepo">
            查看源码
            <el-icon class="el-icon--right"><Link /></el-icon>
          </el-button>
        </div>
      </div>
    </section>

    <!-- 系统状态卡片 -->
    <section class="system-status" v-if="isLoggedIn">
      <el-card class="status-card">
        <template #header>
          <div class="card-header">
            <h3>系统状态</h3>
            <el-tag effect="dark" type="success">在线</el-tag>
          </div>
        </template>
        <div class="status-content">
          <div class="status-item">
            <el-icon><Monitor /></el-icon>
            <div>
              <div class="status-value">{{ microAppsCount }}</div>
              <div class="status-label">微应用</div>
            </div>
          </div>
          <div class="status-item">
            <el-icon><User /></el-icon>
            <div>
              <div class="status-value">{{ userStore.userInfo?.username || '未登录' }}</div>
              <div class="status-label">当前用户</div>
            </div>
          </div>
          <div class="status-item">
            <el-icon><Key /></el-icon>
            <div>
              <div class="status-value">{{ userRoles.join(', ') || '无' }}</div>
              <div class="status-label">角色</div>
            </div>
          </div>
          <div class="status-item">
            <el-icon><Timer /></el-icon>
            <div>
              <div class="status-value">{{ tokenExpiresIn }}</div>
              <div class="status-label">Token有效期</div>
            </div>
          </div>
        </div>
      </el-card>
    </section>

    <!-- 特性展示 -->
    <section class="features-section" ref="featuresSection">
      <h2 class="section-title">核心特性</h2>
      <el-row :gutter="24">
        <el-col :span="8" :sm="12" :xs="24">
          <div class="feature-card">
            <div class="feature-icon">
              <el-icon><Connection /></el-icon>
            </div>
            <h3>微前端架构</h3>
            <p>基于Qiankun实现应用间无缝集成，独立开发部署，共享公共依赖</p>
          </div>
        </el-col>
        <el-col :span="8" :sm="12" :xs="24">
          <div class="feature-card">
            <div class="feature-icon">
              <el-icon><Files /></el-icon>
            </div>
            <h3>Monorepo工作流</h3>
            <p>统一管理多个应用，共享配置和依赖，提高开发效率和代码复用</p>
          </div>
        </el-col>
        <el-col :span="8" :sm="12" :xs="24">
          <div class="feature-card">
            <div class="feature-icon">
              <el-icon><Lock /></el-icon>
            </div>
            <h3>权限控制</h3>
            <p>基于RBAC的细粒度权限控制，动态路由和菜单，统一权限管理</p>
          </div>
        </el-col>
        <el-col :span="8" :sm="12" :xs="24">
          <div class="feature-card">
            <div class="feature-icon">
              <el-icon><Promotion /></el-icon>
            </div>
            <h3>状态管理</h3>
            <p>基于Pinia的响应式状态管理，支持持久化和跨应用状态共享</p>
          </div>
        </el-col>
        <el-col :span="8" :sm="12" :xs="24">
          <div class="feature-card">
            <div class="feature-icon">
              <el-icon><Refresh /></el-icon>
            </div>
            <h3>自动化部署</h3>
            <p>集成CI/CD流水线，一键部署到多环境，支持灰度发布和回滚</p>
          </div>
        </el-col>
        <el-col :span="8" :sm="12" :xs="24">
          <div class="feature-card">
            <div class="feature-icon">
              <el-icon><CopyDocument /></el-icon>
            </div>
            <h3>多标签页</h3>
            <p>支持多标签页切换，保持页面状态，提升用户操作效率</p>
          </div>
        </el-col>
      </el-row>
    </section>

    <!-- 微应用展示 -->
    <section class="micro-apps-section">
      <h2 class="section-title">微应用列表</h2>
      <el-row :gutter="24">
        <el-col :lg="8" :md="12" :sm="24" v-for="app in availableMicroApps" :key="app.name">
          <el-card class="app-card" :body-style="{ padding: '0px' }">
            <div class="app-header" :class="getAppHeaderClass(app)">
              <el-avatar :icon="app.icon" class="app-icon" />
              <div class="app-badge">
                <el-tag size="small" :type="app.requiredRoles?.includes('SUPER_ADMIN') ? 'danger' : 'primary'">
                  {{ app.requiredRoles?.includes('SUPER_ADMIN') ? '管理员' : '用户' }}
                </el-tag>
              </div>
            </div>
            <div class="app-body">
              <h3 class="app-title">{{ app.title }}</h3>
              <p class="app-desc">{{ app.description }}</p>
              <div class="app-tech">
                <el-tag size="small" effect="plain" v-for="tech in app.technologies" :key="tech">{{ tech }}</el-tag>
              </div>
            </div>
            <div class="app-footer">
              <el-button 
                type="primary" 
                @click="navigateToMicroApp(app)"
                :disabled="!hasPermissionForApp(app)"
              >
                {{ hasPermissionForApp(app) ? '访问应用' : '无权限' }}
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <!-- 系统架构图 -->
    <section class="architecture-section">
      <h2 class="section-title">系统架构</h2>
      <el-card class="architecture-card">
        <div class="architecture-diagram">
          <div class="architecture-placeholder">
            <el-empty description="架构图" />
          </div>
        </div>
      </el-card>
    </section>

    <!-- 开发团队 -->
    <section class="team-section">
      <h2 class="section-title">开发团队</h2>
      <el-row :gutter="24">
        <el-col :span="8" :sm="12" :xs="24" v-for="(member, index) in teamMembers" :key="index">
          <div class="member-card">
            <el-avatar :size="64" :src="member.avatar">{{ member.name.charAt(0) }}</el-avatar>
            <h3 class="member-name">{{ member.name }}</h3>
            <p class="member-role">{{ member.role }}</p>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../store/user'
import { usePermissionStore } from '../store/permission'
import { microApps } from '../microApps.config'
import { TokenManager } from '../utils/tokenManager'
import { 
  ArrowDown, Link, Monitor, User, Key, Timer, 
  Connection, Files, Lock, Promotion, Refresh, CopyDocument
} from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()
const permissionStore = usePermissionStore()
const tokenManager = TokenManager.getInstance()
const featuresSection = ref<HTMLElement | null>(null)

// 计算属性
const isLoggedIn = computed(() => userStore.isLoggedIn)
const microAppsCount = computed(() => microApps.length)
const userRoles = computed(() => userStore.userInfo?.roles || [])
const tokenExpiresIn = computed(() => {
  const tokenInfo = TokenManager.getTokenInfo()
  if (!tokenInfo.expiresAt) return '未登录'
  
  const now = new Date()
  const expiry = new Date(tokenInfo.expiresAt)
  const diffMs = expiry.getTime() - now.getTime()
  const diffMins = Math.round(diffMs / 60000)
  
  return diffMins > 0 ? `${diffMins}分钟` : '已过期'
})

// 可用的微应用
const availableMicroApps = computed(() => {
  return microApps.map(app => ({
    ...app,
    description: getAppDescription(app.name),
    technologies: getAppTechnologies(app.name),
    icon: getAppIcon(app.name)
  }))
})

// 团队成员
const teamMembers = [
  { name: '张三', role: '前端架构师', avatar: '' },
  { name: '李四', role: '后端开发', avatar: '' },
  { name: '王五', role: 'DevOps工程师', avatar: '' },
]

// 方法
const scrollToFeatures = () => {
  featuresSection.value?.scrollIntoView({ behavior: 'smooth' })
}

const navigateToGitRepo = () => {
  window.open('https://github.com/yourusername/monorepo-qiankun-template', '_blank')
}

const navigateToMicroApp = (app: any) => {
  if (app.activeRule) {
    router.push(app.activeRule.replace('/', ''))
  }
}

const hasPermissionForApp = (app: any) => {
  if (!app.requiredRoles?.length) return true
  return app.requiredRoles.some((role: string) => userRoles.value.includes(role))
}

const getAppHeaderClass = (app: any) => {
  const appIndex = microApps.findIndex(a => a.name === app.name)
  return `app-header-${(appIndex % 4) + 1}`
}

const getAppDescription = (appName: string) => {
  const descriptions: Record<string, string> = {
    'vue-app1': '配置管理应用，提供AI模型、云存储和应用配置管理功能',
    'vue-app2': '数据可视化应用，提供图表、仪表盘和数据分析功能',
    'vue-build': '构建部署应用，提供自动化构建、部署和发布功能',
    'web-account': '账户管理应用，提供用户、角色和权限管理功能',
    'web-main': '主应用，提供系统整体框架和微应用集成'
  }
  return descriptions[appName] || '微应用模块'
}

const getAppTechnologies = (appName: string) => {
  const technologies: Record<string, string[]> = {
    'vue-app1': ['Vue 3', 'Element Plus', 'Pinia'],
    'vue-app2': ['Vue 3', 'ECharts', 'TypeScript'],
    'vue-build': ['Vue 3', 'WebSocket', 'CI/CD'],
    'web-account': ['React', 'Ant Design', 'Redux'],
    'web-main': ['React', 'Qiankun', 'Webpack']
  }
  return technologies[appName] || ['Vue 3', 'TypeScript']
}

const getAppIcon = (appName: string) => {
  const icons: Record<string, any> = {
    'vue-app1': Promotion,
    'vue-app2': Monitor,
    'vue-build': Refresh,
    'web-account': User,
    'web-main': Connection
  }
  return icons[appName] || Connection
}

onMounted(() => {
  // 可以在这里加载一些初始数据
})
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 英雄区 */
.hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  margin: 40px 0;
  padding: 60px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-5));
  color: white;
  text-align: center;
}

.hero-content {
  max-width: 800px;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 32px;
  opacity: 0.9;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* 系统状态 */
.system-status {
  margin: 40px 0;
}

.status-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--el-box-shadow-light);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
}

.status-content {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  flex: 1;
  min-width: 200px;
}

.status-item .el-icon {
  font-size: 24px;
  color: var(--el-color-primary);
}

.status-value {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.status-label {
  font-size: 0.9rem;
  color: var(--el-text-color-secondary);
}

/* 特性展示 */
.features-section {
  margin: 60px 0;
}

.section-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 32px;
  color: var(--el-text-color-primary);
  position: relative;
  padding-bottom: 12px;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background-color: var(--el-color-primary);
  border-radius: 2px;
}

.feature-card {
  padding: 32px 24px;
  margin-bottom: 24px;
  border-radius: 12px;
  background-color: var(--el-bg-color);
  box-shadow: var(--el-box-shadow-light);
  transition: all 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--el-box-shadow);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin-bottom: 16px;
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  font-size: 24px;
}

.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--el-text-color-primary);
}

.feature-card p {
  color: var(--el-text-color-secondary);
  line-height: 1.6;
}

/* 微应用展示 */
.micro-apps-section {
  margin: 60px 0;
}

.app-card {
  margin-bottom: 24px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s;
}

.app-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--el-box-shadow);
}

.app-header {
  height: 120px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  position: relative;
}

.app-header-1 {
  background: linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-5));
}

.app-header-2 {
  background: linear-gradient(135deg, var(--el-color-success), var(--el-color-success-light-5));
}

.app-header-3 {
  background: linear-gradient(135deg, var(--el-color-warning), var(--el-color-warning-light-5));
}

.app-header-4 {
  background: linear-gradient(135deg, var(--el-color-danger), var(--el-color-danger-light-5));
}

.app-icon {
  background-color: rgba(255, 255, 255, 0.2);
  font-size: 24px;
}

.app-body {
  padding: 20px;
}

.app-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--el-text-color-primary);
}

.app-desc {
  color: var(--el-text-color-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}

.app-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.app-footer {
  padding: 0 20px 20px;
  text-align: right;
}

/* 架构图 */
.architecture-section {
  margin: 60px 0;
}

.architecture-card {
  border-radius: 12px;
  overflow: hidden;
}

.architecture-diagram {
  padding: 20px;
  text-align: center;
}

.architecture-img {
  max-width: 100%;
  height: auto;
}

/* 团队展示 */
.team-section {
  margin: 60px 0;
}

.member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px;
  margin-bottom: 24px;
  border-radius: 12px;
  background-color: var(--el-bg-color);
  box-shadow: var(--el-box-shadow-light);
  transition: all 0.3s;
}

.member-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--el-box-shadow);
}

.member-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 16px 0 8px;
  color: var(--el-text-color-primary);
}

.member-role {
  color: var(--el-text-color-secondary);
  margin: 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .status-content {
    flex-direction: column;
    gap: 8px;
  }
  
  .status-item {
    min-width: unset;
  }
}
</style> 